<template>
  <div class="content-body" :style="toolsStyle">
    <!--    <custom-query ref="query" />-->
    <custom-user ref="user" :layout="layout" />
    <custom-layout :layout="layout" />
  </div>
</template>

<script>
import CustomUser from '../tools/user';
import CustomLayout from '../tools/layout';
/* import CustomQuery from '../tools/query' */
export default {
  name: 'PortalNewTools',
  components: { CustomUser, CustomLayout },
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    },
    customClass: {
      type: String,
      default: 'right'
    }
  },
  data() {
    return {
      toolsStyle: {},
      isLogin: false,
      layoutStyle: {}
    };
  },
  watch: {
    customClass: {
      handler(object) {
        if (object === 'right') {
          this.toolsStyle = { flexFlow: 'column nowrap', borderLeft: '1px solid #e2e2e2', color: this.layout.fontColor, backgroundColor: this.layout.mrzt, opacity: this.layout.tmd };
        } else {
          this.toolsStyle = { color: this.layout.fontColor, backgroundColor: this.layout.mrzt, opacity: this.layout.tmd };
        }
      },
      immediate: true // 父组件第一次传值时，执行handler，false则第一次不执行
    }
  },
  methods: {}
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
}
.tools-li {
  flex: 0 1 auto ;
  align-items: stretch;
  text-align: center;
  height: 68px;
  line-height: 68px;
  cursor: pointer;
  color: #00a0e9;
  position: relative;
  font-size: 18px;
  font-weight: bolder;
}
.tools-li-all {
  flex: 1 1 auto;
  align-items: stretch;
  text-align: center;
  color: #00a0e9;
  line-height: 68px;
}
/*.tools-li:hover,.tools-li.active{
  background-color: #00a0e9;
  color: #fff;
}*/
</style>
